<template>
	<view class="content">
		<view class="box">
			<view class="goods" v-if="!kong">
				<view class="item" v-for="item in listInfo" @tap="info(item)">
					<image class="face" :src="item.thumb" mode="widthFix"></image>
					<view class="title">
						{{item.title}}
					</view>
					<!-- <view class="tips">
						现货&预售 12:00刷新
					</view> -->
					<view class="box-right">
						购买
					</view>
					<view class="prize" v-if="item.money_price > 0">

						<view class="left">
							<span style="font-size: 22rpx;color: #A6A6A6;">价格：</span>
							<span style="font-weight: bold;">{{formatPrice(item.money_price)}}</span>
							<span style="font-size: 22rpx;color: #A6A6A6;">/张</span>
						</view>
						<!-- <view class="right">
							<span v-if="item.play_type ==5 || item.play_type ==4">1/{{item.now_id}}箱</span>
							<span v-else>{{item.rand}}/{{item.cnt}}箱</span>
						</view> -->
					</view>
					<view class="prize" v-else>
						<view class="left">
							<span style="font-size: 22rpx;transform: scale(0.5);margin-left: 10rpx;">积分</span>
							<span style="font-weight: bold;">{{item.score_price}}</span>
							<span style="font-size: 22rpx;color: #A6A6A6;">/张</span>
						</view>
						<!-- <view class="right">
							<span v-if="item.play_type ==5 || item.play_type ==4">1/{{item.now_id}}箱</span>
							<span v-else>{{item.rand}}/{{item.cnt}}箱</span>
						</view> -->
					</view>

					 <view class="prize"   style="color: #A6A6A6;">
					 
					 	<view class="left">
					 		<span style="font-size: 22rpx;color: #A6A6A6;">已售：<span
					 				v-if="item.play_type ==5 || item.play_type ==4">1</span>
					 			<span v-else>{{item.rand}}</span>
					 		</span>
					 
					 	</view>
					 
					 </view>
					 <view class="prize"   style="color: #A6A6A6;margin-bottom: 10rpx;">
					 
					 	<view class="left">
					 		<span style="font-size: 22rpx;color: #A6A6A6;">总数：<span
					 				v-if="item.play_type ==5 || item.play_type ==4">{{item.now_id}}</span>
					 			<span v-else>{{item.cnt}}</span>
					 		</span>
					 
					 	</view>
					 
					 </view>
				</view>
			</view>

			<view class="kong" v-else>
				<view>暂无活动</view>
				<image src="../../static/activity/qin.png" mode="widthFix"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				zsac: 'ac',
				sqac: '',
				listInfo: '',
				stock_no: 1,
				kong: true,
				playType: '/leitais_group?play_type=3',
				infoType: 'leiTai',
				scrollTop: 0,
				refreshCounter1: 0,
				getNextPageCounter: 0,
				selected: 2,
				banner: [],
				current: 0,
				aa:1,
				b_st:22
			}
		},

		onLoad() {
			// console.log(1234)
			this.$http('/setting/base').then(res => {
				// console.log(res.data.setting.shop_home.modules.filter((e)=>e.type=="swiper"))
				res.data.setting.shop_home.modules.forEach(item => {
					if (item.type == 'swiper') {
						this.banner = item
					}
				})

			})

			this.getData()
		},

		// onPullDownRefresh() {
		// 	this.$showPullRefresh().then(res => {
		// 		this.refreshCounter1++
		// 	})
		// },

		// onReachBottom() {
		// 	this.getNextPageCounter++
		// 	// console.log('reach bottom')
		// },
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop
		// },


		methods: {
			st_load(){
				console.info(11)
			},
			st_list(){
				console.info(22)
			},
			randomNumber(num) {
				console.log(33);
				return Math.floor(Math.random() * num + 1);
			},
			change(e) {
				this.current = e.detail.current
			},
			handleClick(e) {
				let item = e.currentTarget.dataset.item
				let link = item.link || {}
				this.toLink(link)
			},
			GetRequest(url) {
				//获取url中"?"符后的字串  
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					url = "?" + url.split("?")[1]; //模拟获取参数后面的
					var str = url.substr(1);
					let strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

					}
				}
				return theRequest;
			},
			menu(e) {
				this.selected = e
				if (e == 1) {
					this.playType = '/leitais_group';
					this.infoType = 'leiTai';
				} else if (e == 2) {
					this.playType = '/leitais_group?play_type=3';
					this.infoType = 'leiTai';
				} else if (e == 3) {
					this.playType = '/choushangs_group?play_type=1';
					this.infoType = 'chouShang';
				} else {
					this.playType = '/choushangs_group?play_type=2';
					this.infoType = 'chouShang';
				}

				uni.showLoading({
					'mask': true,
					'title': '加载中...'
				})

				this.getData();
			},

			getData() {
				var url = this.playType;
				this.$http(url, 'GET', {
					stock_no: this.stock_no
				}).then(res => {
					console.log(res);
					// 2.3.27 新增替换需求
					this.listInfo = res.data.map((e) => {
						let app_title = e.title_app;
						e.title = app_title ? app_title : e.title;
						return e
					});
					if (res.data.length > 0) {
						this.kong = false;
						this.listInfo.forEach(item => {
							item.rand = this.randomNumber(item.cnt);
						})
					} else {
						this.kong = true;
					}

					uni.hideLoading()
				})
			},

			check(e) {
				if (e == 1) {
					this.zsac = 'ac';
					this.sqac = '';
					this.stock_no = 1;
					this.getData()
				} else {
					this.zsac = '';
					this.sqac = 'ac';
					this.stock_no = 0;
					this.getData()
				}
			},

			info(e) {
				var url = "/packageA/pages/" + this.infoType + "/index?title=";
				uni.navigateTo({
					url: url + encodeURIComponent(e.title) + "&imgUrl=" + e.thumb
				})
			},
			formatPrice(price) {
				return (price / 100).toFixed(2)
			},
		},


	}
</script>

<style lang="scss" scoped>
	[v-cloak] {
		display: none;
	}

	.content {
		background: #F5F5F5;
		width: 100%;
		min-height: 100vh;


		.swiper-wrap {
			width: 100%;
			// height: 100%;
			// position: relative;

			swiper {
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.dots {
			position: relative;
			left: 0;
			bottom: 30rpx;
			width: 100%;
			height: 8rpx;
			display: flex;
			justify-content: center;

			.dot-item {
				margin: 0 6rpx;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.6);
				transition: all 0.4s;


			}

			.active {
				border-radius: 6rpx;
				width: 26rpx;
				background-color: #FD9D11;
			}
		}

		.top {
			padding: 20rpx 30rpx;
			background: #fff;

			.banner {
				width: 100%;
			}

			.menu {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					width: 20%;
					text-align: center;
					font-size: 28rpx;
					color: #666666;

					image {
						width: 60%;
					}
				}
			}
		}

		.box {
			padding: 20rpx 30rpx;
			min-height: 50vh;

			.cate {
				font-size: 32rpx;
				color: #A6A6A6;
				border-bottom: 2rpx solid #EBEBEB;

				.zs {
					display: inline-block;
					text-align: center;
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
				}

				.sq {
					display: inline-block;
					text-align: center;
					width: 70rpx;
					height: 70rpx;
					line-height: 70rpx;
					margin-left: 30rpx;
				}

				.ac {
					color: #000;
					border-bottom: 6rpx solid #000;
				}
			}

			.goods {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
				flex-wrap: wrap;

				.item {
					margin: 25rpx 0;
					width: 48%;
					border-radius: 30rpx 30rpx 20rpx 20rpx;
					background: #fff;
					position: relative;
					overflow: hidden;
					.box-right{
						background: #FD9D11;
						width: 30%;
						height: 120rpx;
						right: 0;
						bottom: 0;
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
					}
					.face {
						width: 100%;
						min-height: 330rpx;
						border-radius: 8px;
						background: #fff;
						border-radius: 30rpx 30rpx 0rpx 0rpx;
					}

					.title {
						font-size: 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding-left: 10rpx;
						margin-top: 10rpx;
					}

					.tips {
						font-size: 22rpx;
						color: #CCCCCC;
						padding-left: 10rpx;
					}

					.prize {
						font-size: 30rpx;
						color: #E34238;
						padding-left: 10rpx;
						margin:  0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.right {
							margin-top: 6rpx;
							font-size: 20rpx;
							width: 44%;
							margin-right: 1%;
							color: #A6A6A6;
							text-align: right;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.kong {
				width: 100%;
				margin-top: 10vh;
				text-align: center;

				color: #A6A6A6;
				font-size: 25rpx;

				image {
					width: 20%;
				}
			}

		}


	}
</style>